import React, { Component, lazy, Suspense } from 'react'
import {	NavLink, Route, Routes } from 'react-router-dom'
import '../../../common/common.css'

// import Home from './LazyLoadHome'
// import About from './LazyLoadAbout'
import Loading from './Loading'

const Home = lazy(() => import('./LazyLoadHome'))
const About = lazy(() => import('./LazyLoadAbout'))

export default class LazyLoadComponent extends Component {
	render() {
		return (
			<div>
				<button className='returnButton'><a href="/">点击返回主菜单</a></button>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header"><h2>React Router Demo</h2></div>
					</div>
				</div>
				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
							<NavLink className="list-group-item" to="/LazyLoad/about">About</NavLink>
							<NavLink className="list-group-item" to="/LazyLoad/home">Home</NavLink>
						</div>
						<div style={{textAlign:"left"}}>
							<h3>
								说明：
							</h3>
							<p>
								这个组件讲述的是懒加载。<br />
								正常情况下引入组件是像 Loading 组件一样直接引入，但是直接引入会产生性能问题,因此出现懒加载。<br />
								懒加载需要引入 lazy 和 Suspense， lazy是进行懒加载组件，而Suspense组件是防止网络加载事件
								特别长情况下正常加载的组件。
							</p>
						</div>
					</div>
					<hr />
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								<Suspense fallback={<Loading />}>
									<Routes>
										<Route
											path="/about"
											element={
												// React.Suspense.fallback 在懒加载文件没有加载完成之前显示的内容
												<React.Suspense fallback={<Loading />}>
													<About />
												</React.Suspense>
											}
										></Route>
										<Route
											path="/home"
											element={
												<React.Suspense fallback={<Loading />}>
													<Home />
												</React.Suspense>
											}
										></Route>
									</Routes>
								</Suspense>
							</div>
						</div>
					</div>
				</div>
			</div>
		)
	}
}
